<h4>
    <a ui-sref="projects.list">Projects:</a>
    <span class="label label-default">{{project.groupId}}</span>/
    <span class="label label-default">{{project.artifactId}}</span>/
    <span class="label label-default">{{project.version}}</span>
    <a ui-sref="projects.profiles.list">Profiles:</a>
    <span class="label label-default">{{profile.name}}</span>
</h4>

<form role="form">
    <div class="form-group">
        <button class="btn btn-default" ng-init="isAddFormCollapsed = true"
                ng-click="isAddFormCollapsed = !isAddFormCollapsed">
            Add Config
        </button>
    </div>
</form>

<form name="newConfigForm"
      ng-submit="create()"
      role="form" collapse="isAddFormCollapsed">

    <div class="form-group">
        <label>config key</label>
        <input type="text"
               ng-model="config.key"
               class="form-control"
               required="">
    </div>

    <div class="form-group">
        <label>config value</label>
        <input type="text"
               ng-model="config.value"
               class="form-control"
               required="">
    </div>

    <div class="form-group">
        <label>description</label>
        <input type="text"
               ng-model="config.description"
               class="form-control">
    </div>

    <input type="submit"
           class="btn btn-success btn-lg"
           ng-disabled="newConfigForm.$invalid">
</form>

<br>

<form role="form">
    <div class="form-group">
        <button class="btn btn-default" ng-init="isBatchFormCollapsed = true"
                ng-click="isBatchFormCollapsed = !isBatchFormCollapsed">
            批量增加Config
        </button>
        <span class="glyphicon glyphicon-question-sign"
              tooltip="批量增加Config，json array格式，请小心使用！"
              tooltip-placement="top"
              tooltip-trigger="mouseenter"></span>
    </div>
</form>

<form name="batchConfigForm"
      ng-submit="batch(batchConfigs)"
      role="form" collapse="isBatchFormCollapsed">
    <div class="form-group">
        <label>例子配置（可以点击“以复制到另一个profile的格式查看”按钮得到JSON字符串）</label>
        <textarea msd-elastic ng-model="exampleBatchConfigs" class="text-info form-control" readonly="readonly">
        </textarea>
    </div>

    <div class="form-group">
        <label>config array(json array):</label>
        <span ng-show="!batchConfigChecked" class="text-danger">格式错误！</span>
        <textarea msd-elastic json-input ng-model="batchConfigs" ng-change='checkBatchConfig(batchConfigs)'
                  class="form-control"></textarea>
    </div>

    <input type="submit"
           class="btn btn-success btn-lg"
           ng-disabled="batchConfigForm.$invalid || !batchConfigChecked">
</form>

<div ng-show="false">
    <h3>Profile Configs</h3>
    <table class="table table-striped">

        <thead>
        <tr>
            <th>key</th>
            <th>value</th>
            <th>description</th>
        </tr>
        </thead>

        <tr ng-repeat="config in configs">
            <td>{{config.key}}</td>
            <td>{{config.value}}</td>
            <td>{{config.description}}</td>

            <td>
                <button class="btn btn-default" ng-click="popUpdateConfigModal(config)">修改</button>
            </td>

            <td>
                <button class="btn btn-danger danger" ng-really-click="delete(config.id)">Delete</button>
            </td>
        </tr>
    </table>
</div>


<h3>Resolved Configs</h3>
<form role="form">
    <div class="form-group">
        <a class="btn btn-success" target="_blank" href="{{propertiesUrl }}">以Properties格式查看</a>
        <a class="btn btn-success" target="_blank" href="{{jsonUrl }}">以JSON格式查看</a>
        <button class="btn btn-success" ng-click="showConfigsJSONModal()">以复制到另一个profile的格式查看</button>
    </div>
</form>

<form role="form">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
            <input type="text" class="form-control" placeholder="Search" ng-model="search.$">
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-danger" ng-init="bOnlyShowKeyValue = true"
                ng-click="bOnlyShowKeyValue = !bOnlyShowKeyValue" ng-show="bOnlyShowKeyValue">
            + 修改/详细显示Key/Value
        </button>
        <button class="btn btn-danger"
                ng-click="bOnlyShowKeyValue = !bOnlyShowKeyValue" ng-show="!bOnlyShowKeyValue">
            - 修改/精简显示Key/Value
        </button>
    </div>

    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="filters.bOnlyShowCurrentProjectConfig">只显示当前项目的配置
            </label>
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="filters.bNotShowCurrentProjectConfig">只显示从其它项目继承过来的配置
            </label>
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="filters.bOnlyShowCurrentProfileConfig">只显示当前Profile的配置
            </label>
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="filters.bNotShowCurrentProfileConfig">只显示非当前Profile的配置
            </label>
        </div>
    </div>
</form>

<table class="table table-striped">

    <thead>
    <tr>
        <th>key</th>
        <th>value</th>
        <th>配置的来源</th>
        <th ng-hide="bOnlyShowKeyValue">description</th>
        <th ng-hide="bOnlyShowKeyValue">createUser</th>
        <th ng-hide="bOnlyShowKeyValue">createTime</th>
        <th ng-hide="bOnlyShowKeyValue">updateUser</th>
        <th ng-hide="bOnlyShowKeyValue">updateTime</th>
        <th ng-hide="bOnlyShowKeyValue"></th>
        <th ng-hide="bOnlyShowKeyValue">lastVersionValue</th>
        <th ng-hide="bOnlyShowKeyValue">version</th>
    </tr>
    </thead>

    <tr ng-repeat="resolvedConfig in resolvedConfigs | filter:filtersFunc | filter:search | orderBy:'config.key'">
        <td>{{resolvedConfig.config.key}}</td>
        <td>{{resolvedConfig.config.value}}</td>
        <td>
            <div ng-show="resolvedConfig.config.profileId != profile.id">
                Project:
                <span class="label label-default">{{resolvedConfig.fromProject.groupId}}</span>/
                <span class="label label-default">{{resolvedConfig.fromProject.artifactId}}</span>/
                <span class="label label-default">{{resolvedConfig.fromProject.version}}</span>
                Profile:
                <span class="label label-default">{{resolvedConfig.fromProfile}}</span>
            </div>
        </td>
        <td ng-hide="bOnlyShowKeyValue">{{resolvedConfig.config.description}}</td>
        <td ng-hide="bOnlyShowKeyValue">{{resolvedConfig.config.createUser}}</td>
        <td ng-hide="bOnlyShowKeyValue">{{resolvedConfig.config.createTime | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
        <td ng-hide="bOnlyShowKeyValue">{{resolvedConfig.config.updateUser}}</td>
        <td ng-hide="bOnlyShowKeyValue">{{resolvedConfig.config.updateTime | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>

        <td ng-hide="bOnlyShowKeyValue">
            <div ng-hide="resolvedConfig.config.profileId != profile.id">
                <button class="btn btn-default" ng-click="popUpdateConfigModal(resolvedConfig.config)">修改</button>
                <button class="btn btn-danger danger" ng-really-message="删除Key: {{resolvedConfig.config.key}} ?" ng-really-click="delete(resolvedConfig.config.id)">Delete</button>
            </div>
        </td>

        <td ng-hide="bOnlyShowKeyValue">{{resolvedConfig.config.lastVersionValue}}</td>
        <td ng-hide="bOnlyShowKeyValue">{{resolvedConfig.config.version}}</td>
    </tr>
</table>